<style scoped>
    .main {
        height: 100%;
    }

    .main >>> .hd-logo {
        width: auto;
        height: 100%;
    }

    .main >>> .layout-logo {
        width: 35%;
    }

    .main >>> .layout-menus {
        width: 32%;
    }

    .home-login {
        color: white;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }

    .home-name {
        color: white;
        font-size: 18px;
        font-weight: bold;
        margin-right: 15px;
    }

    .home-btn {
        color: white;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        margin-right: 15px;
    }
</style>

<template>
    <div class="main">
        <main-theme1
                :siderWidth="220"
                ref="mainTheme"
                homeName="首页"
                collapsible
                :headerMenusShow="closeHeaderMenu"
                :logoPath="showLogo">
            <router-view></router-view>
            <template slot="headerRight">
                <div class="home-name">{{ getUserName }} |</div>
                <Dropdown @on-click="guide">
                    <a href="javascript:void(0)" class="home-btn">
                        <Icon type="md-book"/>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem name="gn">功能使用说明</DropdownItem>
                        <DropdownItem name="zh">账号使用说明</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Poptip trigger="hover" content="注销" placement="bottom">
                    <div class="home-login" @click="logout">
                        <Icon type="md-exit"/>
                    </div>
                </Poptip>
                <!--<div class="home-login" @click="logout">退出登录</div>-->
            </template>
        </main-theme1>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
// import menus from '@/mock/data/php-menus.js'

export default {
  data () {
    return {
      closeHeaderMenu: true,
      defaultLogoPath: 'http://house-manager.oss-cn-qingdao.aliyuncs.com/ctcm/%E5%9B%BE%E7%89%87/%E5%81%A5%E5%BA%B7%E7%A0%81logo.png'
    }
  },
  methods: {
    ...mapActions([
      'getUserInfo',
      'getPhpMenusData',
      'getJavaMenusData',
      'setMenuListData',
      'getMenuHeaderListData',
      'setBreadCrumb'
    ]),
    logout () {
      this.$refs.mainTheme.logout()
    },
    guide (data) {
      // console.log(data)
      if (data === 'zh') {
        window.open('https://house-manager.oss-cn-qingdao.aliyuncs.com/tong-xing-ma/%E9%80%9A%E8%A1%8C%E7%A0%81%E8%B4%A6%E5%8F%B7%E7%AE%A1%E7%90%86%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E.pdf')
      } else {
        // window.open('https://house-manager.oss-cn-qingdao.aliyuncs.com/tong-xing-ma/%E5%81%A5%E5%BA%B7%E9%80%9A%E8%A1%8C%E7%A0%81%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F-%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C.pdf')
        window.open('http://house-manager.oss-cn-qingdao.aliyuncs.com/tong-xing-ma/%E5%81%A5%E5%BA%B7%E9%80%9A%E8%A1%8C%E7%A0%81%E5%9C%BA%E6%89%80%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F-%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C.pdf')
      }
    }
  },
  computed: {
    getUserName () {
      let userInfo = this.$store.state.user.severUserInfo.data
      if (!this.$common.xeUtils.isEmpty(userInfo)) {
        return userInfo.company_name + '【' + userInfo.loginName + '】'
      } else {
        return '未登录'
      }
    },
    getSelectMenuId () {
      return this.$store.state.app.menuSelectId
    },
    showLogo () {
      return 'https://house-manager.oss-cn-qingdao.aliyuncs.com/tong-xing-ma/txzLogo.png'
    }
  },
  mounted () {
    // TODO 如果是java菜单还需要调用综合菜单-id需要自己配置
    this.getUserInfo().then(resx => {
    })
    this.getMenuHeaderListData()
    if (this.getSelectMenuId !== 0) {
      this.getJavaMenusData(this.getSelectMenuId)
    }
    // this.setMenuListData(menus.data)
  }
}
</script>
